<template>
  <view class="category-cards">
    <view 
      v-for="(category, index) in categories" 
      :key="index" 
      class="category-card"
      :class="category.colorClass"
    >
      <view class="card-decoration"></view>
      <view class="card-content" @click="goNextPage(category.url)">
        <view class="card-icon">
          <svg v-if="category.icon === 'alert-circle'" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="10"></circle>
            <line x1="12" y1="8" x2="12" y2="12"></line>
            <line x1="12" y1="16" x2="12.01" y2="16"></line>
          </svg>
          <svg v-if="category.icon === 'book-open'" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
            <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
          </svg>
          <svg v-if="category.icon === 'star'" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
          </svg>
          <svg v-if="category.icon === 'clock'" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="10"></circle>
            <polyline points="12 6 12 12 16 14"></polyline>
          </svg>
          <svg v-if="category.icon === 'award'" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="8" r="7"></circle>
            <polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"></polyline>
          </svg>
          <svg v-if="category.icon === 'zap'" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
          </svg>
        </view>
        <text class="card-name">{{ category.name }}</text>
        <text class="card-count">{{ category.count }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const categories = ref([
  {
    name: "收藏课程",
    icon: "alert-circle",
    count: 42,
    colorClass: "red-gradient",
  },
  {
    name: "收藏资源",
    icon: "book-open",
    count: 18,
    colorClass: "blue-gradient",
  },
  {
    name: "评论点赞",
    icon: "star",
    count: 56,
    colorClass: "amber-gradient",
  },
  {
    name: "我的练习",
    icon: "clock",
    count: 23,
    colorClass: "purple-gradient",
    url: "/pages/myExer/myExer"
  },
  {
    name: "我的考试",
    icon: "award",
    count: 7,
    colorClass: "emerald-gradient",
    url: "/pages/myExam/myExam"
  },
  {
    name: "我的评论",
    icon: "zap",
    count: 31,
    colorClass: "indigo-gradient",
  },
]);

function goNextPage(url) {
  uni.navigateTo({ url: url })
}
</script>

<style>
.category-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.category-card {
  position: relative;
  border-radius: 24rpx;
  padding: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.card-decoration {
  position: absolute;
  top: -30rpx;
  right: -30rpx;
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
}

.card-content {
  position: relative;
  display: flex;
  flex-direction: column;
  color: rgba(255, 255, 255, 0.95);
}

.card-icon {
  margin-bottom: 8rpx;
  color: rgba(255, 255, 255, 0.95);
}

.card-name {
  font-size: 24rpx;
  font-weight: 500;
}

.card-count {
  margin-top: 8rpx;
  font-size: 36rpx;
  font-weight: 700;
}

/* Gradient backgrounds */
.red-gradient {
  background: linear-gradient(to bottom right, #ef4444, #f97316);
}

.blue-gradient {
  background: linear-gradient(to bottom right, #3b82f6, #06b6d4);
}

.amber-gradient {
  background: linear-gradient(to bottom right, #f59e0b, #eab308);
}

.purple-gradient {
  background: linear-gradient(to bottom right, #a855f7, #ec4899);
}

.emerald-gradient {
  background: linear-gradient(to bottom right, #10b981, #14b8a6);
}

.indigo-gradient {
  background: linear-gradient(to bottom right, #2563eb, #4f46e5);
}
</style>